<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>地块管理 - 智慧农业信息管理系统</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body { background-color: #f5f7fa; }
        .navbar { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
        .sidebar { min-height: calc(100vh - 56px); background: white; box-shadow: 2px 0 5px rgba(0,0,0,0.1); padding-top: 20px; }
        .sidebar .nav-link { color: #333; padding: 12px 20px; border-left: 3px solid transparent; }
        .sidebar .nav-link:hover { background-color: #f8f9fa; border-left-color: #667eea; }
        .sidebar .nav-link.active { background-color: #e7f1ff; border-left-color: #667eea; color: #667eea; }
        .content-wrapper { background: white; border-radius: 10px; padding: 25px; margin: 20px; }
        .btn-primary { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; }
        .table thead { background-color: #f8f9fa; }
    </style>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="/index">🌾 智慧农业管理系统</a>
            <div class="navbar-nav ms-auto">
                <span class="navbar-text text-white me-3" th:if="${session.currentUser}">
                    欢迎，<span th:text="${session.currentUser.realName}">用户</span>
                </span>
                <a class="btn btn-outline-light btn-sm" href="/logout">退出登录</a>
            </div>
        </div>
    </nav>

    <div class="container-fluid">
        <div class="row">
            <!-- 侧边栏 -->
            <nav class="col-md-2 d-md-block sidebar">
                <ul class="nav flex-column">
                    <li class="nav-item"><a class="nav-link" href="/index"><i class="fas fa-home me-2"></i>首页</a></li>
                    <li class="nav-item" th:if="${session.currentUser.role == 'admin'}"><a class="nav-link" href="/user/list"><i class="fas fa-users me-2"></i>用户管理</a></li>
                    <li class="nav-item"><a class="nav-link active" href="/field/list"><i class="fas fa-map me-2"></i>地块管理</a></li>
                    <li class="nav-item"><a class="nav-link" href="/crop/list"><i class="fas fa-seedling me-2"></i>作物管理</a></li>
                    <li class="nav-item"><a class="nav-link" href="/material/list"><i class="fas fa-boxes me-2"></i>农资管理</a></li>
                    <li class="nav-item"><a class="nav-link" href="/plan/list"><i class="fas fa-calendar-alt me-2"></i>种植计划</a></li>
                    <li class="nav-item"><a class="nav-link" href="/farming/list"><i class="fas fa-tractor me-2"></i>农事记录</a></li>
                    <li class="nav-item"><a class="nav-link" href="/monitor/list"><i class="fas fa-chart-line me-2"></i>生长监测</a></li>
                    <li class="nav-item"><a class="nav-link" href="/product/list"><i class="fas fa-shopping-basket me-2"></i>产品库存</a></li>
                    <li class="nav-item"><a class="nav-link" href="/sales/list"><i class="fas fa-dollar-sign me-2"></i>销售记录</a></li>
                    <li class="nav-item"><a class="nav-link" href="/statistics/index"><i class="fas fa-chart-bar me-2"></i>数据统计</a></li>
                    <li class="nav-item"><a class="nav-link" href="/news/list"><i class="fas fa-newspaper me-2"></i>新闻管理</a></li>
                    <li class="nav-item"><a class="nav-link" href="/news/index"><i class="fas fa-bullhorn me-2"></i>公告浏览</a></li>
                </ul>
            </nav>

            <!-- 主内容 -->
            <main class="col-md-10">
    <div class="content-wrapper">
        <div class="page-header d-flex justify-content-between align-items-center">
            <h3><i class="fas fa-map me-2"></i>地块管理</h3>
            <button class="btn btn-primary" onclick="addField()">
                <i class="fas fa-plus me-2"></i>新增地块
            </button>
        </div>

        <!-- 使用 Thymeleaf 判断是否有数据 -->
        <div th:if="${fields != null and !fields.isEmpty()}">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>地块编号</th>
                        <th>地块名称</th>
                        <th>面积(亩)</th>
                        <th>土壤类型</th>
                        <th>位置</th>
                        <th>状态</th>
                        <th>当前种植</th>
                        <th>备注</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- 使用 Thymeleaf 循环渲染数据 -->
                    <tr th:each="field : ${fields}">
                        <td th:text="${field.id}">1</td>
                        <td th:text="${field.fieldCode}">A001</td>
                        <td th:text="${field.fieldName}">东区一号田</td>
                        <td th:text="${field.area}">50.0</td>
                        <td th:text="${field.soilType}">水田</td>
                        <td th:text="${field.location}">东区</td>
                        <td>
                            <!-- 使用 Thymeleaf 条件判断 -->
                            <span class="badge bg-success" th:if="${field.status == 1}">使用中</span>
                            <span class="badge bg-secondary" th:if="${field.status == 0}">闲置</span>
                        </td>
                        <td>
                            <span th:if="${field.currentCropName != null}" 
                                  th:text="${field.currentCropName}">水稻</span>
                            <span th:if="${field.currentCropName == null}" class="text-muted">-</span>
                        </td>
                        <td>
                            <span th:if="${field.remark != null and field.remark.length() > 20}" 
                                  th:text="${field.remark.substring(0, 20) + '...'}"></span>
                            <span th:if="${field.remark != null and field.remark.length() <= 20}" 
                                  th:text="${field.remark}"></span>
                            <span th:if="${field.remark == null}" class="text-muted">-</span>
                        </td>
                        <td>
                            <!-- 使用 Thymeleaf 内联表达式 -->
                            <button class="btn btn-sm btn-primary" 
                                    th:onclick="'editField(' + ${field.id} + ')'">
                                <i class="fas fa-edit"></i>
                            </button>
                            <button class="btn btn-sm btn-danger" 
                                    th:onclick="'deleteField(' + ${field.id} + ')'">
                                <i class="fas fa-trash"></i>
                            </button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        
        <!-- 使用 Thymeleaf 显示空数据提示 -->
        <div th:if="${fields == null or fields.isEmpty()}" class="alert alert-info text-center">
            <i class="fas fa-info-circle me-2"></i>暂无地块数据，请点击"新增地块"添加
        </div>
    </div>
            </main>
        </div>
    </div>

    <!-- 编辑模态框 -->
    <div class="modal fade" id="fieldModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalTitle">新增地块</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="fieldForm">
                        <input type="hidden" id="fieldId">
                        <div class="mb-3">
                            <label class="form-label">地块编号 <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="fieldCode" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">地块名称 <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="fieldName" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">面积(亩) <span class="text-danger">*</span></label>
                            <input type="number" step="0.1" class="form-control" id="area" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">土壤类型</label>
                            <select class="form-select" id="soilType">
                                <option value="水田">水田</option>
                                <option value="旱地">旱地</option>
                                <option value="壤土">壤土</option>
                                <option value="沙壤土">沙壤土</option>
                                <option value="黏土">黏土</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">位置</label>
                            <input type="text" class="form-control" id="location">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">备注</label>
                            <textarea class="form-control" id="remark" rows="3"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="saveField()">保存</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
    <script>
        var fieldModal = new bootstrap.Modal(document.getElementById('fieldModal'));
        
        function addField() {
            $('#modalTitle').text('新增地块');
            $('#fieldForm')[0].reset();
            $('#fieldId').val('');
            fieldModal.show();
        }
        
        function editField(id) {
            $('#modalTitle').text('编辑地块');
            $.get('/field/detail/' + id, function(res) {
                if (res.code === 200) {
                    var field = res.data;
                    $('#fieldId').val(field.id);
                    $('#fieldCode').val(field.fieldCode);
                    $('#fieldName').val(field.fieldName);
                    $('#area').val(field.area);
                    $('#soilType').val(field.soilType);
                    $('#location').val(field.location);
                    $('#remark').val(field.remark);
                    fieldModal.show();
                } else {
                    alert(res.message);
                }
            });
        }
        
        function saveField() {
            var data = {
                id: $('#fieldId').val() || null,
                fieldCode: $('#fieldCode').val(),
                fieldName: $('#fieldName').val(),
                area: parseFloat($('#area').val()),
                soilType: $('#soilType').val(),
                location: $('#location').val(),
                remark: $('#remark').val()
            };
            
            $.ajax({
                url: '/field/save',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(data),
                success: function(res) {
                    if (res.code === 200) {
                        alert('保存成功');
                        location.reload();
                    } else {
                        alert(res.message);
                    }
                },
                error: function() {
                    alert('操作失败，请重试');
                }
            });
        }
        
        function deleteField(id) {
            if (confirm('确定要删除该地块吗？')) {
                $.post('/field/delete/' + id, function(res) {
                    if (res.code === 200) {
                        alert('删除成功');
                        location.reload();
                    } else {
                        alert(res.message);
                    }
                });
            }
        }
    </script>
</body>
</html>

